Animated backgrounds

Revision:

header

photo 1
code:
            <header class="one"><img src="../images/5.jpg"  alt="photo 1" width="25%";/></header>
            <style>
                header{background-image: url('../images/5.jpg'); width: 30vw; height:25vw;  
                margin: 0vw 0vw 1vw 5vw; background-repeat:no-repeat; background-size: cover;}
                header{animation: animate_A 5s infinite alternate;}
                .one img{display: flex; justify-items:first baseline; border: 0.5vw solid burlywood;}
                .one img{animation: slide_A 5s infinite alternate ease-in-out 0s;} 
                @keyframes animate_A{
                    from{background-position: 0 0;}
                    to{background-position: 150% 150%;}
                } 
                @keyframes slide_A{
                    0% {transform:translateX(0%);}
                    100% {transform:translateX(175%);}
                }        
            </style>

main

photo 2 
code:
            <main class="two"><img src="../images/1.jpg" alt="photo 2" width="20%"/> </main>
            <style>
            main{background-image: url('../images/1.jpg'); height:20vw;background-repeat:repeat; margin-left: 5vw;}
            main{animation: animate_B 5s infinite alternate;}
            .two img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
            .two img{animation: slide_B 5s infinite alternate ease-in-out 0s;}
            @keyframes animate_B{
                from{background-position: 0 0;}
                to{background-position: 100% 50%;}
            }
            @keyframes slide_B{
                0% {transform:translateX(0%);}
                100% {transform:translateX(175%);}
            }
            </style>

section

photo 3
code:
            <div  class="window">
                <section class="three"><img src="../images/4.jpg" alt="photo 3" width="20%" /></section>
            </div>
            <style>
                .window{height: 20vw;}
                .three{background-image: url('../images/4.jpg'); height:20vw;  width: 30vw; background-repeat:repeat; margin-left: 5vw;}
                .three{animation: animate_C 15s infinite alternate;}
                .three img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                .three img{animation: slide_C 5s infinite alternate ease-in-out 0s;} 
                @keyframes animate_C{
                    from{background-position: 0 0;}
                    to{background-position: 100% 50%;}
                }
                @keyframes slide_C{
                    0% {transform:translateX(0%);}
                    100% {transform:translateX(175%);}
                }
            </style>

aside

code: 
            <aside class="four"><img src="../images/3.jpg" alt="photo 4" width="15%"/></aside>
            <style>
                aside{background-image: url('../images/3.jpg'); height:20vw; background-repeat:repeat;}
                aside{animation: animate_D 9s infinite alternate;}
                .four img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                .four img{animation: slide_D 5s infinite alternate ease-in-out 0s;} 
                @keyframes animate_D{
                    from{background-position: 0 0;}
                    to{background-position: 100% 50%;}
                }
                @keyframes slide_D{
                    0% {transform: translateX(0%) translateY(0%);}
                    100% {transform: translateX(280%) translateY(20%);}
                }
            </style>

footer

code: 
            <footer class="five"><img src="../images/2.jpg" alt="photo 5" width="25%"/></footer>
            <style>
                footer{background-image: url('../images/2.jpg'); height:20vw; background-repeat:repeat;}
                footer{animation: animate_E 2s infinite alternate;}
                .five img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                .five img{animation: slide_E 5s infinite alternate ease-in-out 0s;} 
                @keyframes animate_E{
                    from{background-position: 0 0;}
                    to{background-position: 100% 50%;}
                }
                @keyframes slide_E{
                    0% {transform: translateX(0%) translateY(0%);}
                    100% {transform: translateX(280%) translateY(40%);}
                }
            </style>